<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>所有知识过一遍</title>
	<style type="text/css">
		.dabox{
			width: 300px;
			height: 300px;
			border: 2px solid tomato;
			position: relative;
		}
		.box{
			position: absolute;
			width: 100px;
			height: 100px;
			background-color: skyblue;
			transform: translateX(10%); 
		}
		body{
			height: 3000px;
		}
		p.hhh{
			color: skyblue;
		}
		#shuben{
			border: 1px solid #ccc;
		}
		#dangqian{
			width: 100px;
			height: 100px;
			background-color: green;
		}
		@media(max-width: 900px){
			#dangqian{
				background-color: skyblue;
			}
		}
		@media(max-width: 600px){
			#dangqian{
				background-color: red;
			}
		}
		#schedule-box{
			width: 320px;
			margin: 0 auto;
			padding: 35px 20px;
			font-size: 13px;
		}

		#ro360{
			animation: rotateAnim 20s linear 0s infinite;
		}

		@keyframes rotateAnim{
			0%{
				transform: rotate(0);
			}
			100%{
				transform: rotate(360deg);
			}
		}
	</style>
</head>
<body>

<div class="dabox">
<div class="box">
	
</div>
</div>

<input type="number" name="haha" id="gao">

<form>
	<input type="text" name="nihao">
	<input type="submit" name="" value="nihao">
</form>

<input type="text" name="" id="num1">
<input type="text" name="" id="num2">


<input type="date" name="" id="date1">


<div id="shuben">
	<p>我是书本1</p>
	<p>我是书本2</p>
	<p>我是书本3</p>
	<p>我是书本4</p>
	<p>我是书本5</p>
	<a href="#shuben">你好</a>
</div>

<span href="#shuben">跳到书本</span>


<div style="width: 200px;height: 500px;border: 1px solid #ccc;overflow: hidden;" id="dddddd">
	<ul style="position: relative;" id="bbul">
		<li style="padding:30px 0px">dasda</li>
		<li style="padding:30px 0px">dasda</li>
		<li style="padding:30px 0px">dasda</li>
		<li style="padding:30px 0px">dasda</li>
		<li style="padding:30px 0px">dasda</li>
		<li style="padding:30px 0px">dasda</li>
		<li style="padding:30px 0px">dasda</li>
		<li style="padding:30px 0px">dasda</li>
		<li style="padding:30px 0px">dasda</li>
		<li style="padding:30px 0px">dasda</li>
	</ul>
</div>


<div style="width: 300px;height: 300px;background-color: skyblue;color: #fff;">
	我是300px的盒子
</div>

<div style="width: 100px;height: 100px;background-color: skyblue;">
	
</div>

<p data-shuju="haha" id="ppp">data数据标签</p>

<div id="dangqian"></div>


<form id="biaobiao">
	<input type="text" name="user">
	<button type="button" class="tititi">提交</button>
</form>


<p>来吧</p>

<div style="width: 102px;height: 25px;background-color: #62368F;">
	
</div>

<div>
	<label>你好</label>
	<textarea></textarea>
</div>


<button id="backback">返回上一页</button>
<a href="./yanzheng.html" id="backa">验证页面</a>

<hr/>
<p id="ztdx">字体大小</p>
<select id="xzxz">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
</select>

<input type="checkbox" name="" id="cspg">
<label for="cspg">测试苹果</label>
<input type="checkbox" name="" id="csxl">
<label for="csxl">测试雪梨</label>
<input type="checkbox" name="" id="csxj">
<label for="csxj">测试香蕉</label>

<button id="ppgg">把苹果禁止</button>
<button id="ppgg2">把苹果开了</button>

<input type="radio" name="sec" value="1" class="duoxuan" id="xigua">
<label for="xigua">西瓜</label>
<input type="radio" name="sec" value="2" class="duoxuan" id="pingguo">
<label for="pingguo">苹果</label>
<button type="button" id="huozhi">获值</button>

<div contenteditable="true" style="width: 100px;height: 300px;"></div>

<input type="text" name="" id="my97" onClick="WdatePicker()"/>


<input type="text" name="" id="lalala" onclick="tiana()">

<div style="width: 100px;height: 100px;background-color: skyblue;" id="ro360">
	
</div>

<input type="checkbox" name="" id="nhgg">你好的开关
<button id="kaige">开歌开歌</button>


<audio src="http://music.163.com/song/media/outer/url?id=171121.mp3" id="song"></audio>
<!-- <script src="https://cdn.bootcss.com/rxjs/5.5.6/Rx.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> -->
<script src="./lib/jquery.js"></script>
<script src="./My97DatePicker/WdatePicker.js"></script>
<script>

// window.onscroll = function(){
// 	console.log(document.documentElement.scrollTop);
// }
var anxia = 0;


$("#dddddd").on("mousedown",function(event){
	
	anxia = event.pageY;
	var benshentop = 810;
	var benshentop2 = parseInt($("#bbul").css("top"));
	$(document).on("mousemove",function(event){
		event.preventDefault();
		var zhongjian = Math.abs(event.pageY - anxia);
		var bili = Math.floor(zhongjian/500 * 100);
		bili = (bili/100);
		if(event.pageY - anxia >0){
			$("#bbul").css("top",-benshentop*bili +benshentop2);
		}else{
			$("#bbul").css("top",benshentop*bili +benshentop2);
		}
		
	});
});

$(document).on("mouseup",function(event){
		event.preventDefault();
		$(this).off("mousemove");
	});



(function(){
	if($("#nhgg").prop("checked") !== true){
		console.log("没有选上");
	}else{
		console.log("选了你好");
	}
})();

$("#kznh").on("click",function(){
	$("#nhgg").prop("checked",!$("#nhgg").prop("checked"));
	console.log($("#nhgg").prop("checked"));
});



document.getElementById("dddddd").scrollTo(0,200,2000)


var shuzi = 233;
shuzi = shuzi.toString();
shuzi = toString.call(shuzi);
console.log(shuzi);
console.log(document.getElementById("song").ended);

$("#my97").on("blur",function(){
	console.log($(this).val());
});

 $("#ppgg").on("click",function(){
 	$("#ppgg2").on("click",function(){
 		nihaonihao(this);
 	});
 });

 $("#playthesong").on("click",function(){
 	document.getElementById("song").play();
 });

 //  $("#ppgg2").on("click",function(){
 // 	var flag = $("#cspg").attr("disabled",false);
 // 	console.log(flag);
 // });

 $("#xzxz").on("change",function(){
 	console.log($(this).val());
 });


 // window.onscroll = function(){
 // 	console.log("nihjao");
 // }

 window.zifuzifu = function(){
 	console.log("nihao");
 }
zifuzifu();
    var str = "abcde";
    console.log(str.substr(-4,1));
    // var str2 = str.startsWith("http");
    // console.log(str2);


var shuzu10 = [1,2,5];
// console.log(shuzu10);

$.each(shuzu10,function(ind,val){
	console.log(val);
});

$("#backa").prop("href","ddadsdsa");
// console.log($("#backback").prop("id"));


$(function(){
	var shuzu = ["a","b","c"];


	$.each(shuzu,function(val,ind){
		console.log(val);
	});

	var laima = $("#ppp").data("shuju");
	console.log(laima);

	console.log(toString.call("dadas"));


	$(".tititi").on("click",function(){
		$("#biaobiao").submit();
	});




})



// var guonian = ["B","D","A","C"];
// console.log(guonian.sort((a,b) => {
// 	return a.charCodeAt(0) - b.charCodeAt(0);
// }));

// $.ajax({
// 	url: "http://v.juhe.cn/joke/content/list.php?key=de74abf928a55ecb8a11216761819b83&page=2&pagesize=10&sort=asc&time=1418745237"
// 	type: "post",
// 	dataType: "jsonp",
// 	success:function(res){
// 		console.log(res);
// 	},
// 	error:function(res){
// 		console.log("没有数据"+res);
// 	}
// })


// $.ajax({
// 	url: "http://songsearch.kugou.com/song_search_v2?keyword=%E5%91%A8%E6%9D%B0%E4%BC%A6&clientver=&platform=WebFilter&page=1",
// 	type: "get",
// 	dataType: "jsonp",
// 	success:function(res){
// 		console.log(res);
// 	},
// 	error:function(res){
// 		console.log("没有数据"+res);
// 	}
// })

// $.ajax({
// 	url: "http://music.163.com/outchain/player?type=2&id=516392300&auto=1&height=66&bg=e8e8e8",
// 	type: "get",
// 	dataType: "jsonp",
// 	success:function(res){
// 		console.log(res);
// 	},
// 	error:function(res){
// 		console.log("没有数据"+res);
// 	}
// });

// $.ajax({
//         url: "http://localhost:3000/all",
//         type: "get",
//         dataType: "json",
//         timeout: 2000,
//         beforeSend:function(xhr){
//         	console.log("加载中"+xhr);
//         },
//         success:function(res){
//             console.log(res);
//         },
//         error:function(){
//             console.log("失败");
//         },
//         complete:function(){
//         	console.log("加载结束");
//         }
//     });












var shi = new Date();
shi.getFullYear()
$("#date1").on("change",function(){
	var shijian = this.valueAsDate;
	shijian = shijian.getFullYear();
	console.log(shijian);
});

  function bijiao(eve){
    var time1 = +$("#num1").val();
    var time2 = +$("#num2").val();

    // if(time1 > time2 && time2!=0){
    // 	alert("不能比num2的大");
    // 	$("#num1").val("");
    // }
    if(time1 > time2 && time2!=0){
    	if(eve.target.id==="num1"){
    		alert("不能比num2的大");
    		$("#num1").val("");
    	}else{
    		alert("不能比num1的小");
    		$("#num2").val("");
    	}
    }
    
  }

  $("#num1").on("keyup",function(event){
  	if(event.keyCode == 13){
  		bijiao(event);
  	}
  	
  });

   $("#num2").on("keyup",function(event){

  	if(event.keyCode == 13){
  		bijiao(event);
  	}
  });




	// $("#num1").on("keyup",function(event){
	// 	if(event.keyCode ==13){
	// 		var time1 = +this.value;
	// 		var time2 = +$("#num2").val();

	// 		if(time2 !=0){
	// 			if(time1 > time2){
	// 				alert("不能比num2的大");
	// 				this.value = "";
	// 			}
	// 		}
	// 	}
	// })

	// $("#num2").on("keyup",function(event){
	// 	if(event.keyCode ==13){
	// 		var time1 = +$("#num1").val();
	// 		var time2 = +this.value;

	// 		if(time2 < time1){
	// 			alert("不能比num1的小");
	// 			this.value = "";
	// 		}
	// 	}
	// })

</script>
</body>
</html>